<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>state简写方式</title>
</head>

<body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        //1.继承了一个react组件
        class Weather extends React.Component {
            //react中的state是用于存储变量的容器，给容器存储两个数据，一个是isHot，另一个是wind
            state = { isHot: false, wind: '微风' }

            render() {
                //     绑定一个点击事件，事件的回调是自定义的一个方法
                return <h1 onClick={this.changeWeather}>
                    今天天气很{this.state.isHot ? '炎热' : '凉爽'}，{this.state.wind}
                </h1>
                // 通过this.state可以访问到对应变量
            }

            //自定义方法————要用赋值语句的形式+箭头函数
            changeWeather = () => {
                // 直接取反
                this.setState({ isHot: !this.state.isHot })
            }
        }
        //2.渲染组件到页面
        ReactDOM.render(<Weather />, document.getElementById('test'))

    </script>
</body>

</html>